<template>
  <div id="app">
    <div class="header">
      <div class="header_header">
        <h3 class="header_header_title" @click="topaht('/title')">
          考试管理系统
        </h3>
        <!-- <router-link class="link" to="/title">首页</router-link> -->
        <!-- <a class="link1" v-on:mouseenter="changeActive($event)"
        >管理</a> -->
        <!-- <router-link class="link" to="/home">题库</router-link> -->
        <div class="header_header_foot">
          <el-avatar
            class="header_header_foot_img"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          ></el-avatar>
          <el-row class="block-col-2">
            <el-col :span="12">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  用户名
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu class="yyy" slot="dropdown">
                  <i class="el-icon-minus"></i>
                  <router-link class="nnn" to="/login">退出</router-link>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="header_2">
      <div
        style="
          width: 1400px;
          margin: auto;
          padding-top: 12px;
          padding-left: 10px;
        "
      >
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(v, i) in path" :key="i"
            ><span
              :class="v.class"
              @click="topaht(v.path)"
              >{{ v.name }}</span
            >
            <!-- <button><i class="el-icon-error"></i></button> -->
            </el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
    </div>
    <!-- <div class="header_3" v-show-slide="show" name="fade" v-on:mouseover="removeActive($event)" v-on:mouseleave="likaileActive($event)">
      <div class="header_3_h1">
        <el-link :underline="false" style="font-size: 1.2em;" @click="TitleTiao">
          题目管理
          <i class="el-icon-arrow-right"></i>
        </el-link>
      </div>
      <div class="header_3_h2">
        <el-link :underline="false" style="font-size: 1.2em;" @click="ClassTiao">
          课程管理
          <i class="el-icon-arrow-right"></i>
        </el-link>
      </div>
    </div> -->
    <!-- 上下分级 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      ifs:true,
      path: [
        {
          path: "/title",
          name: "首页",
          class:'weight span_a'
        },
      ],
    };
  },
  methods: {
    ifshow() {
      this.show = !this.show;
      console.log(this.show);
    },
    // changeActive($event){
    //   console.log($event)
    //   this.show = true
    //   this.ifs = false
    // this.ifshow()
    // setTimeout(()=>{
    //   this.ifshow()
    // },1500)
    // },
    // likaileActive($event){
    //   console.log($event)
    //   this.show = false
    //   this.ifs = true
    // },
    // removeActive($event){
    //   console.log($event)
    //   this.show = true
    //   this.ifs = false
    // },
    // TitleTiao(){
    //   this.$router.push("/qtype")
    //   this.show = false
    //   this.ifs = true
    // },
    topaht(data) {
      if (this.$route.path != data) {
        this.$router.push(data);
      }
    },
    getPath() {
      const path = this.$route.path;
      for (let q = 0; q < this.path.length; q++) {
        if(this.path[q].path == path){
          this.path[q].class = 'weight span_a'
        }else{
          this.path[q].class = 'span_a'
        }
      }
      for (let i = 0; i < this.path.length; i++) {
        if (this.path[i].path == path) {
          return;
        } 
      }
      this.path.push({
        path: this.$route.path,
        name: this.$route.query.name,
        class:'weight span_a'
      });
    },
  },
  mounted(){
    this.getPath();
  },
  watch: {
    $route: "getPath",
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.header {
  width: 100%;
  height: 61px;
  background-color: #545c64;
}
.header_2 {
  height: 45px;
  background-color: #e9e9e9;
}
.header_3 {
  height: 160px;
  width: 100%;
  background-color: #dcdfe6;
  /* position: fixed; */
  z-index: 1000;
  top: 60px;
  opacity: 0.7;
}
.header_3_h1 {
  width: 1000px;
  height: 80px;
  /* line-height: 50px; */
  margin: auto;
  line-height: 80px;
}
.header_3_h2 {
  width: 1000px;
  height: 80px;
  margin: auto;
  line-height: 80px;
}
.header_header {
  width: 1400px;
  height: 60px;
  line-height: 50px;
  margin: auto;
}
.header_header_title {
  color: white;
  font-size: 26px;
  float: left;
  margin-right: 20px;
}
.el-menu-demo {
  float: left;
}
.header_header_foot {
  width: 200px;
  height: 60px;
  line-height: 60px;
  float: right;
}
.header_header_foot_img {
  margin-top: 10px;
  margin-right: 10px;
  float: left;
}
.link {
  font-size: 20px;
  color: white;
  margin-right: 20px;
  text-decoration: none;
}
.link1 {
  font-size: 20px;
  color: white;
  margin-right: 20px;
  text-decoration: none;
}
/* .link1:hover{
  border-bottom: 1px solid red;
} */
.header_header_foot_p {
  color: white;
  margin-right: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: white;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
.nnn {
  text-decoration: none;
  color: black;
}
.yyy {
  width: 60px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-family: serif;
}
.span_a {
  font-size: 14px;
  cursor: pointer;
}
.span_a:hover {
  font-size: 17px;
}
.weight {
  font-weight: bolder;
}
</style>
